<template>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="teamInfo.teamName"
          name="teamName"
          label="队伍名称"
          placeholder="请输入队伍名称"
          :rules="[{ required: true, message: '请填写队伍名称' }]"
      />
      <van-field
          v-model="teamInfo.teamDesc"
          rows="1"
          autosize
          label="队伍描述"
          type="textarea"
          placeholder="请输入队伍描述"
          :rules="[{ required: true, message: '请填写队伍描述信息' }]"
      />
      <van-field
        label="队伍最大人数"
        placeholder="请设置队伍最大人数"
      >
        <template #input>
          <van-stepper min="2" max="20" v-model="teamInfo.teamMaxinum" disable-input />
        </template>
      </van-field>
      <van-field
          v-model="teamInfo.teamExpireTime"
          is-link
          readonly
          name="datePicker"
          label="征召截止日期"
          placeholder="点击选择截止日期"
          @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" position="bottom">
        <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />
      </van-popup>
      <van-field name="radio" label="队伍状态">
        <template #input>
          <van-radio-group v-model="teamInfo.teamStatus" direction="horizontal">
            <van-radio name="0">公开</van-radio>
            <van-radio name="1">加密</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
          v-model="teamInfo.teamPwd"
          name="teamPwd"
          label="队伍密码"
          placeholder="请输入队伍密码"
          v-if="teamInfo.teamStatus === '1'"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script setup lang="ts">

// 初始化队伍信息
import {ref} from "vue";
import request from "../../request/request";
import {showFailToast, showSuccessToast} from "vant";
import {useRouter} from "vue-router";
const router = useRouter();

const initialTeam = {
  teamName: '',
  teamDesc: '',
  teamMaxinum: 2,
  teamExpireTime: '',
  teamStatus: '0',
  teamPwd: ''
}

// 队伍信息
const teamInfo = ref({...initialTeam});

// 是否展示弹出层日期
const showPicker = ref(false);

// 点击日期选择框中确认触发
const onConfirm = ({selectedValues}) => {
    teamInfo.value.teamExpireTime = selectedValues.join('-');
    showPicker.value = false;
}

// 提交创建队伍信息触发
const onSubmit = async () => {
  const res = await request.post('/team/create', teamInfo.value);
  if (res.data.code === 200 && res.data.data) {
    showSuccessToast('创建队伍成功！');
    // 然后跳转到队伍页
    router.push({
      path: '/team',
      replace: true
    })
  } else {
    showFailToast(res?.data?.message);
  }
}

</script>

<style scoped>

</style>